<template>
	<view class="container">
		<navigator url="/pages/search/search" hover-class="none" class="search">
			<view class="icon-input">
				<uni-icons class="icon" color="#a1a0a0" type="search" size="20"></uni-icons>
				<input placeholder="搜索产品名称" placeholder-class="input" />
			</view>
		</navigator>
		<viwe class="data">
			<view class="left-name">
				<view :class="['item', actived==index ? 'active':'']" @click="changeActived(index)" v-for="(item,index) in searchProductClassifyList">{{item.className}}</view>
			</view>

			<view class="right-data">
				<view class="module" v-for="(item,index) in searchProductClassif" :key="index">
					<view class="title">{{item.className}}</view>
					<view class="list">
						<navigator :url="'/pages/product/concentration/concentration?index=1&&searchKey='+items.className" class="item" v-for="items in item.children" :key="index">
							<image v-if="items.picture == null" src="https://m.nocexpo.com/statics/js/modules/h5/img/fenleibgc.png" mode="widthFix" />
							<image v-else :src="items.picture" mode="widthFix" />
							<view class="title">{{items.className}}</view>
						</navigator>
					</view>
				</view>
			</view>
		</viwe>
	</view>
</template>

<script>
import classifyApi from '@/api/classify.js';
import commonMethod from '@/utils/commonMethod.js';

export default {
	data() {
		return {
      actived: 0,
      num: 0,
      searchProductClassifyList: [], //产品分类表
      searchProductClassif: [], //标题分类列表
      searchProductList: [],//数据
      search: {},
      productList: [],//产品列表
      list: ["推荐分类", "金属切削机床", "加工中心", "车床", "齿轮加工机床", "特种机床", "螺纹加工机床", "钻床", "雕刻机", "刨床/插床", "复合切削机床", "激光仪器", "线材/型材弯机", "激光焊接机", "激光器", "特种机床"]
    };
	},

  created() {
    //获取动态高度
    this.getSearchProductClassify();
  },

  methods:{
    changeActived(index,e) {
      this.actived = index
      this.num = index
      this.getSearchProductClass(this.num)
    },

    /**
     * 获取产品分类表
     */
    getSearchProductClassify() {
      // ‘0’ 的位置 传入 点选分类的id
      classifyApi.getClassifyList({pid:0}).then(res => {
        this.searchProductClassifyList = res.data.list
        this.getSearchProductClass(this.num)
      });
    },

    /**
     * 获取标题列表
     * @param num
     */
    getSearchProductClass(num) {
      classifyApi.getClassifyList({pid:this.searchProductClassifyList[num].id}).then(res => {
        this.searchProductClassif = res.data.list
        this.searchProductClassif.forEach((value,index)=>{
          this.getSearchProduct(value.id)
        })
      });
    },

    /**
     * 获取数据列表
     * @param num
     */
    getSearchProduct(num) {
      classifyApi.getClassifyList({pid:num}).then(res => {
        this.searchProductList = res.data.list
      });
    },


    /**
     * 搜索产品，获取产品列表
     */
    searchProduct() {
      classifyApi.getProductList(
          {
            search: this.search.searchKey,
            page: this.search.page,
            limit: this.search.limit
          }
      ).then(res => {
        if (res.data.code == 0) {
          this.productList = [...this.productList, ...res.data.page.list]
          this.productList.forEach((value,index,array)=>{
            if(value.banarImg){
              value.banarImg = value.banarImg.split(',')[0]
            }
            value.ifUpdateName = false
            if(value.price == 0){
              value.price = '询价'
            }else{
              value.price = commonMethod.handlePrice(value.price)
            }
          })
        }
      });
    },

  }

};
</script>

<style lang="scss" scoped>
.search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100rpx;
	overflow: hidden;
	padding: 0px $interval;
	background: #fff;
	.icon-input {
		flex: 1;
		display: flex;
		align-items: center;
		height: 68rpx;
		background: #f7f7f7;
		border-radius: 35rpx;
		.icon {
			margin-left: 25rpx;
			margin-right: 18rpx;
		}
		input {
			flex: 1;
			color: $text-color;
		}
		.input {
			color: #a1a0a0;
		}
	}
}
.data {
	display: flex;
	height: calc(100% - 100rpx);
	.left-name {
		width: 230rpx;
		height: 100%;
		overflow-y: auto;
		.item {
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
		}
		.active {
			position: relative;
			color: $color-primary;
			background-color: #fff;
			font-weight: 600;
			&:after {
				content: '';
				position: absolute;
				left: 0px;
				top: 50%;
				margin-top: -20rpx;
				width: 8rpx;
				height: 40rpx;
				background: linear-gradient(90deg, #54d6d2 0%, #00aaa6 100%);
				border-radius: 0rpx 6rpx 6rpx 0rpx;
			}
		}
	}
	.right-data {
		flex: 1;
		height: 100%;
		overflow-y: auto;
		background-color: #fff;
		.module {
			padding: $interval 0px 0px;
			>.title {
				font-weight: 600;
				font-size: $font-size + 2;
				margin-bottom: $interval-min;
				padding-left: $interval;
			}
			.list {
				display: flex;
				flex-wrap: wrap;
				padding: 0px 10rpx;
				.item {
					width: 33%;
					text-align: center;
					margin-bottom: -3+$interval;
					image {
						width: 128rpx;
						height: 128rpx;
					}
					.title {
						font-size: $font-size-min;
						color: #2E2D2D;
						margin-top: -10+$interval-min;
					}
				}
			}
		}
	}
}
</style>
